<template>
	<view class="container" :style="{ minHeight: windowHeight + 'px' }">
		<u-navbar style="position: fixed;z-index: 10000;" title="我的钱包" :border-bottom="false" back-icon-color="#fff" :is-fixed="true" :background="{ backgroundColor: 'rgba(255,255,255,0)' }" title-color="#fff"></u-navbar>
		<view class="wallet-head" :class="{ authentication: userInfo.authentication == 1 }">
			<view class="real-tips" v-if="userInfo.authentication != 1" @tap.stop="toPage" data-url="/pageUser/certification/input" :data-auth="true">
				<image class="real-tips-icon" src="@/static/images/mine/icon-mine-auth.png" mode="aspectFit"></image>
				<view class="real-tips-text">您还没有实名认证，请立即实名认证</view>
				<u-icon name="arrow-right" color="#ccc" size="21"></u-icon>
			</view>
			<view class="wallet-main">
				<view class="wallet-main-title">可提现金额</view>
				<view class="wallet-main-body">
					<u-count-to ref="balanceCount" :autoplay="false" style="line-height: 1;" color="#fff" font-size="70" :start-val="totalBalance.startVal" :end-val="totalBalance.endVal" :decimals="2" separator="," @end="countEnd"></u-count-to>
					<view class="wallet-main-btns">
						<view class="wallet-main-btn" @tap.stop="toPage" data-url="/pageUser/withdraw/apply/apply" :data-auth="true">提现</view>
						<view class="wallet-main-btn important" @tap.stop="toPage" data-url="/pageUser/recharge/index" :data-auth="true">充值</view>
					</view>
				</view>
			</view>
			<view class="wallet-part">
				<view class="wallet-part-item">
					<view class="wallet-part-title">积分</view>
					<view class="wallet-part-money">{{ userInfo.coins || '0.00' }}</view>
				</view>
				<view class="wallet-part-item" @tap.stop="toPage" data-url="/pageUser/points/log/sui">
					<text class="wallet-part-help suifont sui-bangzhu"></text>
					<view class="wallet-part-title">穗穗宝</view>
					<view class="wallet-part-money">{{ userInfo.points || '0.00' }}</view>
				</view>
			</view>
		</view>
		<view class="wallet-menu">
			<u-cell-group :border="false">
				<view @tap.stop="toPage" data-url="/pageUser/recharge/order/index" :data-auth="true"><u-cell-item hover-class="cell-hover-class" title="充值记录"></u-cell-item></view>
				<view @tap.stop="toPage" data-url="/pageUser/points/log/index" :data-auth="true"><u-cell-item hover-class="cell-hover-class" title="账单明细"></u-cell-item></view>
				<view @tap.stop="toPage" data-url="/pageUser/points/log/coin" :data-auth="true"><u-cell-item hover-class="cell-hover-class" title="积分明细"></u-cell-item></view>
				<view @tap.stop="toPage" data-url="/pageUser/withdraw/list/list" :data-auth="true"><u-cell-item hover-class="cell-hover-class" title="提现记录"></u-cell-item></view>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			setting: {},
			windowHeight: '',
			totalBalance: {
				startVal: 0,
				endVal: 0
			}
		};
	},
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
	},
	onShow() {
		// this.getUserDetail();
		this.refreshUserInfo();
	},
	methods: {
		getUserDetail() {
			this.$get(this.$api.getUserWallet, {}, res => {
				this.userInfo = res.data.userInfo;
				this.setting = res.data.setting;
			});
		},
		/**
		 * 跳转充值页面
		 */
		onTargetRecharge(e) {
			// 记录formId
			this.navigateTo({
				url: '../recharge/index'
			});
		},

		/**
		 * 跳转充值记录页面
		 */
		onTargetRechargeOrder(e) {
			// 记录formId
			this.navigateTo({
				url: '../recharge/order/index'
			});
		},

		/**
		 * 跳转账单详情页面
		 */
		onTargetBalanceLog(e) {
			// 记录formId
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '../wallet/balance/log'
			});
		},
		/**
		 * 跳转余额提现
		 */
		onTargetWithdraw(e) {
			// 记录formId
			this.navigateTo({
				url: '../withdraw/apply/apply'
			});
		},
		/**
		 * 跳转余额提现记录
		 */
		onTargetWithdrawLog(e) {
			// 记录formId
			Route.navigateTo({
				url: '../withdraw/list/list'
			});
		},
		completeUserInfo(data) {
			this.$set(this.totalBalance, 'endVal', data.balance);

			setTimeout(() => {
				if (this.totalBalance.startVal != this.totalBalance.endVal) {
					this.$refs.balanceCount.start();
				}
			});
		},
		countEnd(e) {
			this.$set(this.totalBalance, 'startVal', this.totalBalance.endVal);
		}
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #fff;
}
.wallet-head {
	height: calc(420rpx + 44px + var(--status-bar-height));
	padding-top: calc(44px + var(--status-bar-height));
	background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(239, 86, 101, 1) 16%, rgba(245, 118, 135, 1) 55%, rgba(248, 133, 151, 1) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	&.authentication {
		height: calc(348rpx + 44px + var(--status-bar-height));
		padding-top: calc(44px + 10rpx + var(--status-bar-height));
	}
	.real-tips {
		width: 670rpx;
		height: 72rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 36rpx;
		margin-top: 10rpx;
		margin-bottom: 22rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		flex-shrink: 0;
		.real-tips-icon {
			width: 40rpx;
			height: 40rpx;
		}
		.real-tips-text {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(151, 151, 151, 1);
			letter-spacing: 2rpx;
			flex: 1;
			padding: 0 7rpx;
			display: flex;
			align-items: center;
		}
	}
	.wallet-main {
		width: 670rpx;
		margin-top: 10rpx;
		flex-shrink: 0;
		.wallet-main-title {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 40rpx;
		}
		.wallet-main-body {
			height: 100rpx;
			margin-top: 6rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			.wallet-main-money {
				flex: 1;
			}
			.wallet-main-btns {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				.wallet-main-btn {
					width: 106rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 23rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(151, 151, 151, 1);
					&.important {
						color: $theme-main-color;
					}
				}
			}
		}
	}
}
.wallet-part {
	width: 670rpx;
	height: 205rpx;
	background: #fff;
	border-radius: 33rpx;
	box-shadow: 0 4rpx 10rpx 4rpx rgba($color: #b4b4b4, $alpha: 0.5);
	margin-top: 35rpx;
	flex-shrink: 0;
	position: relative;
	display: flex;
	&::after {
		content: '';
		width: 4rpx;
		height: 80rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 2rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.wallet-part-item {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.wallet-part-title {
			height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(151, 151, 151, 1);
			line-height: 33rpx;
			letter-spacing: 2rpx;
		}
		.wallet-part-money {
			font-size: 58rpx;
			line-height: 1;
			margin-top: 20rpx;
		}
		.wallet-part-help {
			position: absolute;
			top: 25rpx;
			right: 35rpx;
			color: #979797;
			font-size: 24rpx;
		}
	}
}
.wallet-menu {
	margin-top: 100rpx;
}
</style>
